<template>
  <div class="arc">
    <el-card class="box-card t30"
             shadow="never">
      <div slot="header"
           class="clearfix">
        <span>内容列表</span>
        <el-button style="float: right; padding: 3px 0"
                   type="text">添加文章</el-button>
      </div>
      <el-form ref="form"
               :rules="rules"
               :model="form"
               label-width="80px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="标题："
                          prop="title">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="小标题：">
              <el-input class=""
                        v-model="form.shorttitle"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="点击：">
              <el-input class="xh-input-80"
                        v-model="form.click"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="属性：">
          <el-checkbox-group v-model="form.flag"
                             size="small">
            <el-checkbox-button v-for="item in form.flags"
                                :label="item.att"
                                :disabled="item.attname === '跳转'"
                                :key="item.att">{{item.attname}}</el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="略缩图：">
          <el-upload class="avatar-uploader"
                     :action="imguploadurl"
                     :show-file-list="false"
                     :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload">
            <img v-if="form.litpic"
                 :src="form.litpic"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="栏目：">
              <el-cascader v-model="form.typeid"
                           :options="form.children"
                           :props="{ expandTrigger: 'hover',checkStrictly :true }"
                           @change="handleChange"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="10"
                  class="el-fly">
            <el-form-item label="副栏目：">
              <el-cascader clearable
                           v-model="form.typeid2"
                           :options="form.children"
                           :props="{ expandTrigger: 'hover', multiple: true,checkStrictly :true }"
                           @change="handleChange"></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item class="arc-tag"
                      label="TAG：">
          <el-tag :key="tag"
                  v-for="tag in form.tags"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag)">
            {{tag}}
          </el-tag>
          <el-input class="xh-input-80"
                    v-if="inputVisible"
                    v-model="inputValue"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm"
                    @blur="handleInputConfirm">
          </el-input>
          <el-button v-else
                     class="button-new-tag"
                     size="small"
                     @click="showInput">+ New Tag</el-button>
        </el-form-item>
        <field :addfields="form.cInfos.add"></field>
        <editor v-if="form.body"
                :catchData="form.body"></editor>

        <el-form-item>
          <el-button type="primary"
                     @click="submitForm('form')">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>

      </el-form>
    </el-card>
  </div>
</template>

<script>
import { arcajax } from '../../axios/api'
import urls from '../../axios/url'
import editor from '../../components/editor/wangeditor'
import field from '../../components/addfield/addfield'
export default {
  components: { editor, field },
  data () {
    return {
      aid: '',
      imguploadurl: urls.imgupload,
      inputVisible: false,
      inputValue: '',
      form: {
        title: '',
        flags: '',
        click: '',
        shorttitle: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    this.aid = this.$route.params.id
    arcajax(this.aid).then((res) => {
      console.log(res.data.data)
      if (res.data.state === 1) {
        this.form = res.data.data
        console.log(res.data.data.cInfos.add)
      }
    })
  },
  methods: {
    handleAvatarSuccess (res, file) {
      console.log(res.state)
      if (res.state === 1) {
        this.$msg(res.msg, 1)
        console.log(file)
        this.form.litpic = URL.createObjectURL(file.raw)
      } else {
        this.$msg(res.msg, 3)
      }
    },
    beforeAvatarUpload (file) {
      console.log(file)
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 1

      if (!isJPG) {
        this.$message.error('略缩图图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 1MB!')
      }
      return isJPG && isLt2M
    },
    handleChange (value) {
      console.log(value)
    },
    handleClose (tag) { // 关键字与tag
      this.form.tags.splice(this.form.tags.indexOf(tag), 1)
    },
    showInput () {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm () { // 添加关键字与tag
      let inputValue = this.inputValue
      if (inputValue) {
        this.form.tags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        console.log(valid)
        console.log(this.form)
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style lang='less' scoped>
img {
  max-width: 100px;
  height: auto;
}
.arc {
  max-width: 1200px;
}
.xh-input-80 {
  width: 80px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
@w: 128px;
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: @w;
  height: @w;
  line-height: @w;
  text-align: center;
}
.avatar {
  width: @w;
  height: @w;
  display: block;
}

.el-fly .el-cascader {
  width: 100%;
}
.arc-tag {
  span {
    margin-right: 10px;
  }
}
.w-e-text,
.w-e-toolbar {
  display: none;
}
#wangeditor {
  margin-bottom: 20px;
}
</style>
